import React from 'react';
import ReactDOM from 'react-dom';
// import './css/qqq.module.scss'
import cla_sty from './css/qqq.module.scss'
//  在react中实现样式独立  ： 文件名得写成 xxx.module.css
//     然后再去import导入   使用的时候 再去打点实现
console.log(cla_sty)
/* 
  jsx 语法： 就把html结构当作一种数据类型对待即可

  怎么在结构中使用变量？{表达式} 类似于vue的{{表达式}}
      不管是行内还是结构内的  都是 {表达式}
      但凡是想在结构中使用变量 那么就得使用{}
  
  类名 ：在react中 想使用类名 必须写成 className 
        多个类名的时候 不会自动合并 而是直接顶替了
              for 必须写成htmlFor

  行内样式： react中 必须写成  style={对象}   
  
  dangerouslySetInnerHTML={{ __html: html }} 等同于 vue的 v-html

  一般使用 三元表达式 来实现类似于vue的 v-if功能

  一般使用  map 来实现类似于vue的  v-for功能
  
  普通对象 不能直接当作结构渲染  一写就报错
*/
let str = '888'
let id = 'qqq';
let span = <i>6666{str}</i>;
let cla = 'box2'
let sty = {
  border: '1px solid #333',
  // 把烤串命名转成驼峰
  marginLeft: '20px'
}

let html = '<b>hello b标签</b>'
// let html2= <b>hello b标签</b>

let n = 11;
function f1(n) {
  if (n > 10) {
    return <h3>n大于10</h3>
  } else {
    return <h3>n不大于10</h3>
  }
}

function f2(arr) {
  let t = [];
  for (let i = 0; i < arr.length; i++) {

    t.push(<li key={arr[i]}>{arr[i]}</li>)
  }
  console.log(t)
  return t
}

let ary = [1111, 2222, 3333, 4444]
function App() {
  let h1 = <h1 id={id} className={'box ' + cla}>hello react {span}</h1>
  return <div style={sty} className={cla_sty.h1}>
    {h1}
    <input type="checkbox" id='aaa' /> <label htmlFor="aaa">aaa</label>
    <p dangerouslySetInnerHTML={{ __html: html }}></p>

    {
      n > 10 ? <h3>n大于10</h3> : <h3>n不大于10</h3>
    }
    {f1(n)}
    <ul>
      {
        ary.map(item => <li key={item}>{item}</li>)
      }
    </ul>
    <ul>{f2(ary)}</ul>
    {ary}{JSON.stringify(sty)}

  </div>
}

ReactDOM.render(<App />, document.getElementById('root'))
// jsx原理